<template>
	<!-- 封装歌手组件 -->
	<li v-for="item in singerList" :key="item.id" @click="router.push({ name: '歌手详情', params: { id: item.id } })">
		<img :src="getUrl(item.singerPic)" alt="">
		<p>{{ item.name }}</p>
	</li>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { getUrl } from '@/utils/format';
const router = useRouter();

defineProps(['singerList']);
</script>

<style lang="scss" scoped>
li {
	list-style: none;
	width: 240px;
	font-size: 12px;
	margin-right: 15px;
	margin-bottom: 30px;
	&:last-of-type{
		margin-right: 0;
	}
	cursor: pointer;
	border: 1px solid #e0e0e0;
	text-align: center;
	padding-top: 6px;
	box-sizing: border-box;
	img {
		height: 220px;
		width: 220px;
		object-fit:cover;
	}
	p {
		text-align: center;
	}
}
</style>
